<template>
	<view>
		<view class="top-bar bg-pink">
			<view class="cu-bar bg-pink">
				<view class="action" @tap="geBack()">
					<text class="cuIcon-back text-gray"></text> 返回
				</view>
			</view>
		</view>

		<view class="video">
			<iframe class="video-iframe" :src="iframeSrc" scrolling="no" border="0" frameborder="no" framespacing="0"
				allowfullscreen="true">
			</iframe>
		</view>
		<scroll-view scroll-x class="bg-pink nav">
			<view class="cu-item" :class="0==tabCur?'text-white cur':''" @tap="tabSelect(0)" :data-id="index">
				简介
			</view>
			<view class="cu-item" :class="1==tabCur?'text-white cur':''" @tap="tabSelect(1)" :data-id="index">
				评论
			</view>
		</scroll-view>
		
		<view v-if="tabCur==0" class="introduce">
			介绍
		</view>

		<view v-if="tabCur==1" class="reply">
			<view class="text-center margin-xl text-black text-bold" :class="replies?'hide':'no-hide'">
				<text>什么都没有(⊙﹏⊙)</text>
			</view>
			<view class="flex justify-between margin-lr margin-top-sm">
				<view>最新评论</view>
				<view><text class="cuIcon-sort">按热度</text></view>
			</view>
			<view v-for="(item,index) in replies" :key="index">
				<view class="cu-card dynamicisCard">
					<view class="cu-item shadow">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<image class="cu-avatar round lg" :src=item.member.avatar mode="aspectFit"></image>
								<view class="content flex-sub">
									<view>{{item.member.uname}}</view>
									<view class="text-gray text-sm flex justify-between">
										{{reWriteDate(item.ctime)}}
									</view>
								</view>
							</view>
						</view>
						<view class="text-content margin-sm">
							{{item.content.message}}
						</view>
						<view class="text-gray text-sm text-right padding">
							<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.like}}
							<text class="cuIcon-messagefill margin-lr-xs"></text> {{item.rcount}}
						</view>
						<view class="cu-list menu-avatar comment solids-top">
							<view v-for="(item1,index1) in item.replies" class="cu-item">
								<image class="cu-avatar round" :src=item1.member.avatar mode="aspectFit"></image>
								<view class="content">
									<view class="text-grey">{{item1.member.uname}}</view>
									<view class="text-gray text-content text-df">
										{{item1.content.message}}
									</view>
									<view class="margin-top-sm flex justify-between">
										<view class="text-gray text-df">{{reWriteDate(item1.ctime)}}</view>
										<view>
											<text class="cuIcon-appreciate text-gray">{{item1.like}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="margin-sm text-right">
							<text class="text-gray ">{{item.reply_control.sub_reply_entry_text}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="text-center margin-xl text-black text-bold" :class="isHide?'hide':'no-hide'">
				<text>真的一点也没有啦!!!✿ヽ(°▽°)ノ✿</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		api
	} from '../../common/api.js';
	export default {
		data() {
			return {
				aid: '',
				bvid: '',
				cid: '',
				videoHost: 'https://player.bilibili.com/player.html',
				sort: 2,
				iframeSrc: '',
				replies: [],
				page: {
					num: 1,
					size: 0
				},
				isHide: true,
				tabCur: 1
			}
		},
		onLoad(option) {
			this.aid = option.aid;
			this.bvid = option.bvid;
			let data = {
				bvid: this.bvid,
				jsonp: 'jsonp'
			};
			uni.request({
				url: api.pagelist,
				data: data,
				success: (res) => {
					this.cid = res.data.data[0].cid;
					this.iframeSrc = this.videoHost +
						'?aid=' + this.aid +
						'&bvid=' + this.bvid +
						'&cid=' + this.cid
					console.log(this.iframeSrc);
					//获取评论
					this.getReply();
				}
			})


		},
		onReachBottom() {
			if (!this.isRefresh) {
				console.log("触发刷新事件");
				this.getNextReply();
			}
		},
		methods: {
			tabSelect(index) {
				this.tabCur = index
			},
			getReply() {
				let data = {
					type: 1,
					pn: this.page.num,
					oid: this.aid,
					sort: this.sort
				};
				console.log(data);
				uni.request({
					url: api.reply,
					data: data,
					success: (res) => {
						console.log(res.data);
						this.replies = res.data.data.replies;
						this.page = res.data.data.page;
					}
				})
			},
			getNextReply() {
				let data = {
					type: 1,
					pn: this.page.num + 1,
					oid: this.aid,
					sort: this.sort
				};
				if (this.page.num >= (this.page.count / this.page.size)) {
					this.isHide = false;
					return 0;
				}
				console.log(this.page.size);
				uni.request({
					url: api.reply,
					data: data,
					success: (res) => {
						this.replies = this.replies.concat(res.data.data.replies);
						this.page = res.data.data.page;
					}
				})
			},
			reWriteDate(date) {
				date = new Date(parseInt(date) * 1000)

				function addZero(num) {
					if (num < 10)
						return "0" + num;
					return num;
				}
				return date.getFullYear() + "年" +
					addZero(date.getMonth() + 1) + "月" +
					addZero(date.getDate()) + "日 " +
					addZero(date.getHours()) + ":" +
					addZero(date.getMinutes());
			},
			geBack() {
				uni.navigateBack({

				})
			}
		}
	}
</script>

<style>
	.top-bar {
		position: fixed;
		width: 100%;
		top: 0upx;
		z-index: 100;
	}

	.video {
		width: 100%;
		margin-top: 140upx;
	}

	.video-iframe {
		width: 100%;
		height: 500upx;
	}

	.hide {
		display: none;
	}

	.no-hide {
		display: block;
		height: 100upx;
	}
</style>
